<template>
	<view>
		<view class="goodsDet" v-if="details.infos">
			<view class="goodsCmpTit" >参数信息</view>
			<view class="goodsInfos">
				<view class="infoBox" v-for="(item,index) in details.infos" :key="index">
					<view class="infosTit">{{item.name}}</view>
					<view class="infosValue"><text>{{item.attributeValue}}</text></view>
				</view>
				<view class="infoBox" v-if=" Number(details.infos.length) % 2 !== 0">
					<view class="infosTit"></view>
					<view class="infosValue"><text></text></view>
				</view>
			</view>
		</view>
		<view class="goodsDet" v-if="details.notice">
			<view class="goodsCmpTit">购买须知</view>
			<view style="padding: 10px;">
				<rich-text :nodes="details.notice | formatRichText"></rich-text>
			</view>
		</view>
		<view class="goodsDet" v-if="details.intro">
			<view class="goodsCmpTit">商品卖点</view>
			<view style="padding: 10px;">
				<rich-text :nodes="details.intro | formatRichText"></rich-text>
			</view>
		</view>
		<view class="goodsDet" v-if="details.description">
			<view class="goodsCmpTit">图文详情</view>
			<view style="padding: 10px;">
				<rich-text :nodes="details.description | formatRichText"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			details: Object,
		},
		data(){
			return{
				
			}
		},
		methods:{
			
		},
		
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '.', k = ' ', mh = ':') {
				let data = new Date(value);
		
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month > 9 ? month : "0" + month;
				day = day > 9 ? day : "0" + day;
				h = h > 9 ? h : "0" + h;
				mm = mm > 9 ? mm : "0" + mm;
				s = s > 9 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day}`;
			},
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				if (!html) return;
				//控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"');
				return newContent;
			}
		
		}
	}
</script>

<style lang="scss">
	.goodsDet{
		width: 100%;
		margin-top: 20px;
		.goodsInfos{
			width: 100%;
			@extend %flex-align-center;
			flex-wrap: wrap;
			border-top: 1px solid #f3f6f8;
			border-right: 1px solid #f3f6f8;
			.infoBox{
				@extend %flex-align-center;
				width: 50%;
				.infosTit{
					width: 130px;color: #11192d;
					padding: 0 10px;
					height: 50px;
					@extend %flex-align-center;
					background: #f3f6f8;
				}
				.infosValue{
					width: calc(100% - 130px);
					height: 50px;
					@extend %flex-align-center;
					font-size: 15px;
					word-wrap: break-word;
					border-bottom: 1px solid #f3f6f8;
					padding: 0 10px;
					text{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box !important;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
	.goodsCmpTit{
		color: #11192d;
		// font-family: PingFangSC-Semibold;
		font-size: 20px;
		font-weight: 600;
		line-height: 20px;
		margin-bottom: 15px;
	}
</style>